import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';
import {connect} from 'react-redux'
import { LoadGoodsActionAsync,deleteGoodsActionAsync,searchGoodsActionAsync,updateGoodsActionAsync } from '../../../redux/action/goodsAction'
function GoodsCount(props) {
  React.useEffect(()=>{
      props.LoadGoodsActionAsync()
  },[])
  const data = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
    {
      type: '分类三',
      value: 18,
    },
    {
      type: '分类四',
      value: 15,
    },
    {
      type: '分类五',
      value: 10,
    },
    {
      type: '其他',
      value: 5,
    },
  ];
  const config = {
    appendPadding: 10,
    data:props.GoodsList,
    angleField: 'number',
    colorField: 'name',
    radius: 0.8,
    label: {
      type: 'outer',
      content: '{name} {percentage}',
    },
    interactions: [
      {
        type: 'pie-legend-active',
      },
      {
        type: 'element-active',
      },
    ],
  };
  return <Pie {...config} />;
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    GoodsList:state.goodsList
	}),
	{LoadGoodsActionAsync}
)(GoodsCount)
